<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>表单</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <script type="text/javascript" src="/sitefiles/assets/lib/iframe-resizer-4.3.6/iframeResizer.contentWindow.min.js"></script>
  <link href="/sitefiles/assets/lib/elementui/default/index.css" rel="stylesheet" type="text/css" />
  <link href="/sitefiles/assets/css/element-ui.css" rel="stylesheet" type="text/css" />
  <style>
    #main {
      margin-left: 10px;
      margin-right: 10px;
    }
    #main, .el-alert {
      min-height: 200px;
    }
    .el-alert__icon {
        font-size: 22px;
        width: 22px;
    }
    .el-alert__title {
      font-size: 20px;
      line-height: 50px;
    }
    .el-upload, .el-upload-dragger {
        width: 150px;
    }
    .upload-file {
      width: 360px
    }
    .upload-file .el-upload, .upload-file .el-upload-dragger {
        width: 100%;
    }
  </style>
</head>

<body>
  <div id="main">
    <template v-if="pageType === 'form'">

      <el-row style="font-size:20px; text-align: center; margin: 10px 0;">
        {{ title }}
      </el-row>
      <el-row v-if="description" class="tips" style="font-size:14px; text-align: center; margin: 10px 0;">
        {{ description }}
      </el-row>

      <el-form size="medium" ref="form" :model="form" label-width="auto" style="margin-top: 15px;">

        <template v-for="style in styles" :key="style.attributeName">
          <!-- Image -->
          <template v-if="style.inputType === 'Image'">
            <el-form-item :label="style.displayName" :prop="utils.toCamelCase(style.attributeName)" :rules="utils.getRules(style.rules)">
              <el-upload
                :action="getUploadUrl(style)"
                :show-file-list="true"
                list-type="picture-card"
                :before-upload="uploadImageBefore"
                :on-progress="uploadProgress"
                :on-success="uploadSuccess"
                :on-error="uploadError"
                :on-remove="uploadRemove"
                :multiple="false">
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </template>
          <!-- File -->
          <template v-else-if="style.inputType === 'File'">
            <el-form-item :label="style.displayName" :prop="utils.toCamelCase(style.attributeName)" :rules="utils.getRules(style.rules)">
              <el-upload
                class="upload-file"
                drag
                :action="getUploadUrl(style)"
                :show-file-list="true"
                :on-progress="uploadProgress"
                :on-success="uploadSuccess"
                :on-error="uploadError"
                :on-remove="uploadRemove"
                :multiple="false">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或 <em>点击上传</em></div>
              </el-upload>
            </el-form-item>
          </template>
          <!-- TextArea -->
          <template v-else-if="style.inputType === 'TextArea'">
            <el-form-item :label="style.displayName" :prop="utils.toCamelCase(style.attributeName)" :rules="utils.getRules(style.rules)">
              <el-input
                v-model="form[utils.toCamelCase(style.attributeName)]"
                type="textarea"
                :placeholder="style.helpText"
                :autosize="{ minRows: 4, maxRows: 10}">
              </el-input>
            </el-form-item>
          </template>
          <!-- Text -->
          <template v-else-if="style.inputType === 'Text'">
            <el-form-item :label="style.displayName" :prop="utils.toCamelCase(style.attributeName)" :rules="utils.getRules(style.rules)">
              <el-input v-model="form[utils.toCamelCase(style.attributeName)]" :placeholder="style.helpText"></el-input>
            </el-form-item>
          </template>
          <!-- Number -->
          <template v-else-if="style.inputType === 'Number'">
            <el-form-item :label="style.displayName" :prop="utils.toCamelCase(style.attributeName)" :rules="utils.getRules(style.rules)">
              <el-input v-model.number="form[utils.toCamelCase(style.attributeName)]" :placeholder="style.helpText"></el-input>
            </el-form-item>
          </template>
          <!-- CheckBox -->
          <template v-else-if="style.inputType === 'CheckBox'">
            <el-form-item :label="style.displayName" :prop="utils.toCamelCase(style.attributeName)" :rules="utils.getRules(style.rules)">
              <el-checkbox-group v-model="form[utils.toCamelCase(style.attributeName)]">
                <el-checkbox v-for="item in style.items" :key="item.value" :label="item.value">
                  {{ item.label }}
                </el-checkbox>
              </el-checkbox-group>
              <div class="tips" v-if="style.helpText">{{style.helpText}}</div>
            </el-form-item>
          </template>
          <!-- Radio -->
          <template v-else-if="style.inputType === 'Radio'">
            <el-form-item :label="style.displayName" :prop="utils.toCamelCase(style.attributeName)" :rules="utils.getRules(style.rules)">
              <el-radio-group v-model="form[utils.toCamelCase(style.attributeName)]">
                <el-radio v-for="item in style.items" :key="item.value" :label="item.value">
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
              <div class="tips" v-if="style.helpText">{{style.helpText}}</div>
            </el-form-item>
          </template>
          <!-- SelectOne -->
          <template v-else-if="style.inputType === 'SelectOne'">
            <el-form-item :label="style.displayName" :prop="utils.toCamelCase(style.attributeName)" :rules="utils.getRules(style.rules)">
              <el-select v-model="form[utils.toCamelCase(style.attributeName)]" :placeholder="style.helpText || '请选择'">
                <el-option
                  v-for="item in style.items"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </template>
          <!-- SelectMultiple -->
          <template v-else-if="style.inputType === 'SelectMultiple'">
            <el-form-item :label="style.displayName" :prop="utils.toCamelCase(style.attributeName)" :rules="utils.getRules(style.rules)">
              <el-select v-model="form[utils.toCamelCase(style.attributeName)]" multiple :placeholder="style.helpText || '请选择'">
                <el-option
                  v-for="item in style.items"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </template>
          <!-- Date -->
          <template v-else-if="style.inputType === 'Date'">
            <el-form-item :label="style.displayName" :prop="utils.toCamelCase(style.attributeName)" :rules="utils.getRules(style.rules)">
              <el-date-picker
                v-model="form[utils.toCamelCase(style.attributeName)]"
                type="date"
                :placeholder="style.helpText || '请选择日期'">
              </el-date-picker>
            </el-form-item>
          </template>
          <!-- DateTime -->
          <template v-else-if="style.inputType === 'DateTime'">
            <el-form-item :label="style.displayName" :prop="utils.toCamelCase(style.attributeName)" :rules="utils.getRules(style.rules)">
              <el-date-picker
                v-model="form[utils.toCamelCase(style.attributeName)]"
                type="datetime"
                :placeholder="style.helpText || '请选择日期时间'">
              </el-date-picker>
            </el-form-item>
          </template>
        </template>

        <template v-if="isSms">
          <el-form-item label="手机号码" prop="smsMobile" :rules="[
              { required: true, message: '请输入手机号码' },
              { validator: utils.validateMobile, message: '请输入有效的手机号码' }
            ]">
            <el-input v-model="form.smsMobile" placeholder="请输入手机号码"></el-input>
          </el-form-item>
          <el-form-item label="短信验证码" prop="smsCode" :rules="[{ required: true, message: '请输入短信验证码' }]">
            <el-input v-model="form.smsCode" autocomplete="off" placeholder="请输入短信验证码">
              <template slot="append">
                <el-link :underline="false" v-on:click.prevent="btnSendSmsClick">
                  {{ smsCountdown > 0 ? smsCountdown + '秒': '获取验证码' }}
                </el-link>
              </template>
            </el-input>
          </el-form-item>
        </template>

        <el-form-item v-if="isCaptcha" label="验证码" prop="captcha" :rules="{ required: true, message: '请输入验证码' }">
          <el-col :span="6">
            <el-input v-model="form.captcha" placeholder="请输入验证码"></el-input>
          </el-col>
          <el-col :span="18">
            <img :src="captchaUrl" v-on:click="apiCaptchaLoad" style="width: 105px; height: 38px; margin-left: 5px;" />
          </el-col>
        </el-form-item>
        
      </el-form>

      <el-row style="text-align: center;">
        <el-divider></el-divider>
        <div style="height: 10px"></div>
        <el-button type="primary" size="medium" v-on:click="btnSubmitClick">提 交</el-button>
        <div style="height: 10px"></div>
      </el-row>

    </template>
    <template v-else-if="pageType === 'success'">
      <el-alert
        v-html="successMessage"
        :closable="false"
        type="success"
        center
        show-icon>
      </el-alert>
    </template>
    <template v-else>
      <el-row style="margin-top: 100px; margin-bottom: 100px; text-align: center">
        <img src="/sitefiles/assets/images/loading.gif" />
        <p>载入中，请稍后...</p>
      </el-row>
    </template>
  </div>
</body>

</html>

<script src="/sitefiles/assets/lib/es6-promise.auto.min.js" type="text/javascript"></script>
<script src="/sitefiles/assets/lib/axios-1.6.1.min.js" type="text/javascript"></script>
<script src="/sitefiles/assets/lib/core-js-3.6.5.min.js" type="text/javascript"></script>
<script src="/sitefiles/assets/lib/lodash-4.17.10.min.js" type="text/javascript"></script>
<script src="/sitefiles/assets/lib/jquery-3.6.4.min.js" type="text/javascript"></script>
<script src="/sitefiles/assets/lib/layer/layer-3.1.1.js" type="text/javascript"></script>
<script src="/sitefiles/assets/lib/sweetalert2-7.28.4.all.min.js" type="text/javascript"></script>
<script src="/sitefiles/assets/lib/vue-2.5.16.min.js" type="text/javascript"></script>
<script src="/sitefiles/assets/lib/elementui/index.js"></script>
<script src="/sitefiles/assets/js/home.js" type="text/javascript"></script>
<script src="/sitefiles/assets/js/utils.js" type="text/javascript"></script>

<script>
  var $formConfigApiUrl = '';
  var $formConfigSiteId = 0;
  var $formConfigChannelId = 0;
  var $formConfigContentId = 0;
  var $formConfigFormId = 0;
</script>
<script src="submit.js" type="text/javascript"></script>
